<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="/Static/Css/reset.css" />
<link rel="stylesheet" type="text/css" href="/Static/Css/zh-cn-system.css" />
<link rel="stylesheet" type="text/css" href="/Static/Css/table_form.css" />
<script src="/Public/js/jquery.min.js"></script>
<script src="/Public/js/jquery.form.js"></script>
<script src="/Public/js/main.js"></script>
<script type="text/javascript" src="/Public/artDialog/jquery.artDialog.js?skin=default"></script>
<script type="text/javascript" src="/Public/artDialog/plugins/iframeTools.js"></script>
</head>
<body>

<div id="test"></div>
<script type="text/javascript" src="/Public/js/jquery1.10.2.min.js"></script>
<script type="text/javascript">
$(function () {
        var colors = Highcharts.getOptions().colors,
            sum = <?php echo ($customer_count); ?>,
            categories = <?php echo ($customer_count); ?>,
            name = '点击隐藏',
			data = <?php echo ($columnData); ?>,
			year = <?php echo ($_GET['year']); ?>,
			month = <?php echo ($_GET['month']); ?>;

        function setChart(name, categories, data, color) {
			chart.xAxis[0].setCategories(categories, false);
			chart.series[0].remove(false);
			chart.addSeries({
				name: name,
				data: data,
				color: color || 'white'
			}, false);
			chart.redraw();
        }

        var chart = $('#container').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: ''+year+'年'+month+'月份电话通话次数统计图！'
            },
            subtitle: {
                text: '以下统计为所选月份通话次数的统计柱形图'
            },
            xAxis: {
                categories: categories
            },
            yAxis: {
                title: {
                    text: '总量'+sum+'（单位：个）'
                }
            },
            plotOptions: {
                column: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function() {
                                var drilldown = this.drilldown;
                                if (drilldown) { // drill down
                                    setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
                                } else { // restore
                                    setChart(name, categories, data);
                                }
                            }
                        }
                    },
                    dataLabels: {
                        enabled: true,
                        color: colors[0],
                        style: {
                            fontWeight: 'bold'
                        },
                        formatter: function() {
                            return this.y+'(个)';
                        }
                    }
                }
            },
            tooltip: {
                formatter: function() {
                    var point = this.point,
                        s = this.x +':<b>'+ this.y +'个</b><br/>';
                    if (point.drilldown) {
                        s += '点击查看 '+ point.category +'当日大图';
                    } else {
                        s += '点击返回查看本月电话量';
                    }
                    return s;
                }
            },
            series: [{
                name: name,
                data: data,
                color: 'white'
            }],
            exporting: {
                enabled: false
            }
        })
        .highcharts(); // return chart
    });

</script>
<script src="/Public/Highcharts/js/highcharts.js"></script>
<script src="/Public/Highcharts/js/modules/exporting.js"></script>
<div class="subnav">

  <div class="explain-col" style="position: relative;">
    <form name="searchForm" id="searchForm" method="GET" action="">
      统计分析：
      <select name="year" id="year" onchange="searchForm.submit()">
            <?php $_result=yearArray(2010);if(is_array($_result)): $i = 0; $__LIST__ = $_result;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$vo): $mod = ($i % 2 );++$i;?><option value="<?php echo ($vo); ?>" <?php if(($_GET['year']) == $vo): ?>selected="selected"<?php endif; ?> /><?php echo ($vo); ?>年</option><?php endforeach; endif; else: echo "" ;endif; ?>
      </select>
      <select name="month" id="month" onchange="searchForm.submit()">
      		<?php if(is_array($monthArr)): $i = 0; $__LIST__ = $monthArr;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$vo): $mod = ($i % 2 );++$i;?><option value="<?php echo ($vo); ?>" <?php if(($_GET['month']) == $vo): ?>selected="selected"<?php endif; ?> ><?php echo ($vo); ?>月</option><?php endforeach; endif; else: echo "" ;endif; ?>
      </select>
      <span id="searchTime" style="display:none;">
      从：<input type="text" class="input-text Wdate" size="20" name="startTime" id="startTime" value="" onClick="WdatePicker({dateFmt:'yyyy-MM-dd'})" readonly="readonly" />
      到&nbsp;<input type="text" class="input-text Wdate" size="20" name="endTime" id="endTime" value="" onClick="WdatePicker({dateFmt:'yyyy-MM-dd'})" readonly="readonly" />
      </span>
      <?php if(($showUserStatistics) == "1"): ?><select name="userId" id="userId" onchange="searchForm.submit();" >
            <option value="0" selected="selected">请选择用户</option>
            <?php if(is_array($userList)): $i = 0; $__LIST__ = $userList;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$vo): $mod = ($i % 2 );++$i;?><option value="<?php echo ($vo["id"]); ?>" <?php if(($_GET['userId']) == $vo["id"]): ?>selected="selected"<?php endif; ?> /><?php echo ($vo["username"]); ?></option><?php endforeach; endif; else: echo "" ;endif; ?>
      </select><?php endif; ?>
      <input type="submit" value=" 搜索 " class="button" />
    </form>
      <div class="content-menu" style="position: absolute; right: 30px;top: 5px;"> <!-- 统计柱形图 --></div>
  </div>
</div>
<!--subnav-->
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

</body>
</html>